<template>
  <div>
    <n-modal v-model:show="showModelD" transform-origin="center" :close-on-esc="handleClose" :mask-closable="false">
      <n-card style="width: auto" title="建设用地复垦债券" :bordered="false" size="huge" role="dialog" aria-modal="true" closable
        @close="closePopup">
        <div class="cardStyle">
          <div class="cardStyle_left">
            <echartsTopLeft></echartsTopLeft>
          </div>
          <div class="cardStyle_right">
            <echartsTopRight></echartsTopRight>
          </div>
          <div class="cardStyle_bottomLefte">
            <echartsBottomLeft></echartsBottomLeft>
          </div>
          <div class="cardStyle_bottomRight">
            <echartsBottomRight></echartsBottomRight>
          </div>
        </div>
      </n-card>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useMainStore } from "../../../../store/index"

import echartsTopLeft from './echarts/echartsTopLeft.vue';
import echartsTopRight from './echarts/echartsTopRight.vue';
import echartsBottomLeft from './echarts/echartsBottomLeft.vue';
// import echartsTwo from './echarts/echartsTwo.vue';
import echartsBottomRight from './echarts/echartsBottomRight.vue';
const store = useMainStore()
const showModelD = ref(false)
const handleClose = ref(false)

// 关闭弹窗
const closePopup = () => {
  showModelD.value = false
  store.showModelD = false
}

watch(() => store.showModelD, (newValue) => {
  showModelD.value = newValue
}, { immediate: true })
</script>

<style lang="scss" scoped>
.cardStyle {
  width: 1300px;
  height: 650px;
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .cardStyle_left {
    width: 550px;
    height: 270px;
    // border: 1px solid red;
  }

  .cardStyle_right {
    width: 550px;
    height: 270px;
    // border: 1px solid red;
  }

  .cardStyle_bottomLefte {
    width: 550px;
    height: 270px;
    // border: 1px solid red;
  }

  .cardStyle_bottomRight {
    width: 550px;
    height: 270px;
    // border: 1px solid red;
  }
}
</style>